import React, { useState } from 'react';
import s from './index.module.scss'
import { ty, search, fp, fw, mc, change, location } from '../../asstes/map'
import { GDMap } from '../../components/index'
import { debound } from '../../tools';
export default function Map() {
    //创建小图标数组是否显示
    let callback = new Array(5).fill(true)
    let [show, setShow] = useState(callback)
    //console.log(show);
    let [seachValue, setSeachValue] = useState('')
    //创建搜索列表
    let initList:any[] =[]
    let [poisList,setPoisList] = useState(initList) 
    //生成防抖函数
    const setSeach = debound((e: any) => {
        setSeachValue(e.target.value)
    }, 1000)
    let textList = [
        '超级充电站',
        '目的充电站',
        '体验中心',
        '服务中心',
        '钣喷中心'
    ]
    let imgList = [
        change,
        mc,
        ty,
        fw,
        fp
    ]
    let set = function (i: number) {
        let newShow = show.map((item, index) => {
            if (i === index) return !item
            else return item
        })
        setShow(newShow)
    }

    return (
        <div className={s.page}>
            <div className={s.container}>
                <div className={s.input}>
                    <div className={s.icon}>
                        <img src={search} alt="" />
                    </div>
                    <input type="text" placeholder='搜索' onChange={setSeach} />
                </div>
                {
                    seachValue === '' ?
                        <div className={s.detail}>
                            <div className={s.scroll}>
                                {textList.map((i, index) => {
                                    return (
                                        <div className={s.item} onClick={() => set(index)} key={index} style={show[index] ? {} : { color: '#777', opacity: '0.5' }}>
                                            <img src={imgList[index]} alt="" />
                                            <div className={s.text}>{textList[index]}</div>
                                        </div>
                                    )
                                })}
                            </div>
                        </div> :
                        ''
                }

            </div>
            {
                // seachValue === ''?
                    <GDMap show={show} value={seachValue} poisList={poisList}  setPoisList={setPoisList}/>
                    // :
                    // ''
            }
            
        </div>

    )
}